<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		
		.box {
			padding: 10px;
		}

		.box label {
			float: left;
			margin-right: 10px;
		}

		.box input,
		.box select,
		.box textarea {
			border: 1px solid silver;
			padding: 5px;
			width: 500px;
		}

		.tbbox table {
			border-collapse: collapse;
			margin-top: 20px;
		}

		.tbbox table td,
		.tbbox table th {
			border: 1px solid #D1d1d1;
			padding: 3px 10px;
			text-align: center;
		}

	</style>
</head>

<body>
	<form>
		
		<div class="box">
			<label>标题</label>
			<input type="text" name="title" value="" required/>
		</div>
		<div class="box">
			<label>描述</label>
			<textarea rows="5" name="desc" required></textarea>
		</div>
		<div class="box">
			<label>类别</label>
			<select name="type" required>
				<option >安全隐患排查</option>
				<option >社会治安寻访</option>
				<option >矛盾排查化解</option>
				<option >城乡治理协管</option>
			</select>
		</div>
		<div >
			紧急程度
			<label><input type="radio" name="urgent" value="一般" checked />一般 </label>
			<label><input type="radio" name="urgent" value="紧急"/>紧急 </label>
			<label><input type="radio" name="urgent" value="特级"/>特级 </label>
		</div>
		<div>
			分发对象
			<label><input type="checkbox" name="goal" value="网格长"/>网格长 </label>
			<label><input type="checkbox" name="goal" value="镇街网格"/>镇街网格 </label>
			<label><input type="checkbox" name="goal" value="区网格"/>区网格  </label>
		</div>
		<div class="box">
			<button type="submit" id="submitBtn">提交</button>
			<button type="reset">重置</button>
			<button type="button" id="cancel">取消</button>
		</div>
	</form>
	<div class="tbbox">
		<div class="box">
			<button type="button" id="addBtn">新增</button>
			<button type="button" id="deleteBtn">删除</button>
		</div>
		<h4>我的事件清单</h4>
		<table width="1200">
			<tr>
				<th><input type="checkbox" value="" id="checkAll" onclick="checkAll(this.checked)" /></th>
				<th>标题</th>
				<th>类别</th>
				<th>紧急程度</th>
				<th>分发对象</th>
				<th>操作</th>
			</tr>
		</table>


	</div>
	<script>
		/**
		*
		1、点击新增，表单显示，表单元素每项都为必填，且标题不能重复
		2、点击删除，判断表格中的多选框选择情况，如果全选则所有复选框勾选并删除所有记录，非全选删除部分
		3、列表中的数据 为标题、类别、紧急程度、分发对象 （以逗号分隔） 
		4、列表中的操作为 查看： 弹出相关信息 含描述 ；编辑：将数据回显在表单上，标题不可编辑 删除：删除本行数据
		5、表单中的提交功能：表单隐藏，列表中显示相关信息
		   重置：重置表单
			 取消：表单隐藏
		6、 其他功能以视频为准
		7、此练习难度5星 初学者不做要求
		*/
		
		function NSet(){
			
			this.nameList = [];
	    }
		NSet.prototype = {
			
			add : function(value){
				if(this.has(value)){
					this.nameList.push(value);
					return true;
				}else{
					return false;
				}
			},
			has : function(value){
				if(this.nameList.indexOf(value) > -1){
					return false;
				}else{
					
					return true;
				}
			},
			
			remove : function(value){
				if(this.nameList.indexOf(value) > -1){
					
					this.nameList = this.nameList.filter(item => item != value); 
					return true;
				}else{
					return false;
				}
				
			}
		}
		
		var _FORM = document.forms[0];
		var table = document.querySelector('table');
		var net = new NSet();
		
		document.forms[0].style.display='none';
		//增加
		var addBtn = document.getElementById("addBtn");
		addBtn.addEventListener('click',function(event){
			document.forms[0].style.display='';
		});
		
		//提交
		_FORM.addEventListener('submit',function(event){
		   event.preventDefault();
			var title = document.forms[0].elements["title"];
			if(net.add(title.value)){
				var desc = document.forms[0].elements["desc"];
				var typeSelect = document.forms[0].elements["type"];
				//var index = typeSelect.selectedIndex;
				//var selectOption = typeSelect.options[index];
				var selectOption = typeSelect.value;
				
				var urgent = document.forms[0].elements["urgent"];
				var urgentValue = urgent.value;
				/**
				for(var i = 0 ; i < urgent.length; i ++ ){
				  if(urgent[i].checked){
				   urgentValue = urgent[i].value;
				  }
				}
				*/
				var goal = document.forms[0].elements["goal"];
				var arr = [];
				
				
				for(var i = 0 ; i < goal.length; i ++ ){
				  if(goal[i].checked){
					arr.push(goal[i].value);
				  }
				
				}
				if(arr.length===0){
				 alert("分发对象不能为空");
				 net.remove(''+ title.value);
				 return;
				}
				

				
				var nSet = {};
				nSet.title = title.value;
				nSet.selectOption = selectOption;
				nSet.desc = desc.value;
				nSet.urgentValue = urgentValue;
				nSet.goal = arr.join(",");
				
				var tr = '<tr>'
						+'	<td><input type="checkbox" name="checkbox" value="" onclick="checkIsSelected()" /></td>'
						+'	<td>'+title.value+'</td>'
						+'	<td>'+selectOption+'</td>'
						+'	<td>'+urgentValue+'</td>'
						+'	<td>'+arr.join(",")+'</td>'
						+'	<td>'
						+'		<button type="button" onclick="lookOver(\'' + JSON.stringify(nSet).replace(/"/g, '&quot;') + '\')">查看</button>'
						+'		<button type="button" onclick="edit(\'' + JSON.stringify(nSet).replace(/"/g, '&quot;') + '\')">编辑</button>'
						+'		<button type="button" onclick="del(this.parentNode.parentNode.parentNode,\''+title.value+'\')">删除</button>'
						+'	</td>'
						+'</tr>';
				table.innerHTML = table.innerHTML+tr;
				
			}else{
				alert("信息已存在");
				return;
			}
			document.forms[0].style.display='none';
			document.forms[0].reset();
			
			
		});
		
		function checkAll(checked){
			if(checked) {
				selectAll(true, "checkbox");
			} else {
				selectAll(false, "checkbox");
			}
		}
		 
		//勾选全部
		function selectAll(isChecked, className) {
			var checkBoxes = document.getElementsByName(className); 
			for(var i = 0;i < checkBoxes.length; i++) {
				if(isChecked) {
					checkBoxes[i].checked = true;
				} else {
					checkBoxes[i].checked = false;
				}
			}
		}
 
		//单笔勾选
		function checkIsSelected() {
			var checkBoxes = document.getElementsByName("checkbox"); 
			var selectAllBox = document.getElementById("checkAll");    
			var ischecked = true;
			for(var i = 0;i < checkBoxes.length; i++) {
				if(!checkBoxes[i].checked) {
					ischecked = false;
					break;
				}
			}
			if(ischecked) {
				selectAllBox.checked = true;
			} else {
				selectAllBox.checked = false;
			}
		}
		//查看
		function lookOver(data){  
			var net = JSON.parse(data);  
			alert("标题:"+net.title+"\n描述:"+net.desc+"\n类别:"+net.selectOption+"\n紧急程度:"+net.urgentValue+"\n分发对象:"+net.goal);
		}
		
		//编辑
		function edit(data){  
			var net = JSON.parse(data);  
			document.forms[0].style.display='';
			document.forms[0].elements["title"].value=net.title;
			document.forms[0].elements["title"].disabled="disabled";
			document.forms[0].elements["desc"].value=net.desc;
			var typeSelect = document.forms[0].elements["type"];
			for(var i = 0 ; i< typeSelect.options.length; i ++ ){
				if (typeSelect.options[i].value == net.selectOption){  
					typeSelect.options[i].selected = true;  
					break;  
				} 
				
			}
			
			
			var urgent = document.forms[0].elements["urgent"];
			
			for(var i = 0 ; i < urgent.length; i ++ ){
			  if(urgent[i].value === net.urgentValue){
					urgent[i].checked = true;
			  }else{
					urgent[i].checked = false;
			  }
			}
			
			var goalArr = net.goal.split(',');
			var goal = document.forms[0].elements["goal"];
			for(var k = 0 ; k < goal.length; k++){
				goal[k].checked = false;
				if(net.goal.indexOf(goal[k].value) > -1 ){
					goal[k].checked = true;
				}
				
			}
						
				
		}
		//单笔删除
		function del(_ob,value){
				document.querySelector('table').removeChild(_ob);
				net.remove('' + value);
				document.forms[0].elements["title"].disabled="";
				document.forms[0].reset();
		}
		
		//批量删除
		var deleteBtn=document.getElementById('deleteBtn');
		deleteBtn.addEventListener('click',function(event){
			var checkFlag = true;
			document.forms[0].elements["title"].disabled="";
			var table = document.querySelector('table');			
			var checkboxs=document.getElementsByName("checkbox");
			for(var i=0;i<checkboxs.length;i++){
				if(checkboxs[i].checked){
					var n=checkboxs[i].parentNode.parentNode.parentNode;
					table.removeChild(n);
					net.remove('' + n.rows[0].getElementsByTagName("td")[1].innerHTML);
					i--;
					checkFlag = false;
				}
			}
			if(checkFlag){
				alert("请勾选要删除的信息");
				return;
			}
			document.forms[0].reset();	
			document.getElementById("checkAll").checked = false;;
			
		});
		
		//取消
		var cancelBtn=document.getElementById('cancel');
		cancelBtn.addEventListener('click',function(event){
			document.forms[0].style.display='none';
			document.forms[0].elements["title"].disabled="";
			document.forms[0].reset();
			
		});
		
		 

	</script>
</body>

</html>
